<script  >
  import axios from "axios";

  export default {
    data() {
      return {
        identity:"",
        formMsg: {
          account: "",
          password: "",
        }
      }
    },
    methods:{
      jumpRegister(){
           this.$router.push('/register')
      },
      jumpForget(){
        this.$router.push('/forget')
      },
      onSubmit(){
        axios({
          method:"get",
          url:"http://localhost:5000/main",
          params:{
            reader_id: this.formMsg.account,
            password: this.formMsg.password,
          },
        }).then((res)=>{
          if(res.data.data ==='登录成功') {
            this.$message({
              message: res.data.data,
              type:"success"
            })
            if(this.identity === "用户"){
              this.$router.push('/main' )
            }else {
              this.$router.push('/admin/book' )
            }

          }else {
            this.$message({
              message:res.data.data,
              type:"error"
            })
          }
        });

      }
    }
  }
</script>

<template>
  <div class="bg">
      <div class="box">
        <div class="box-left"></div>

        <div class="box-right">
          <ul class="navigation">
            <li>
              <a class = "login" >登录</a>
            </li>
            <li>
              <a class="register" @click =jumpRegister >注册</a>
            </li>
          </ul>
          <form>
            <input class="username" placeholder="请输入用户名" v-model="formMsg.account">
            <input class="password" placeholder="请输入密码" v-model="formMsg.password" type="password">

            <div class="radio-div">
              <input type="radio" id="student" name = "type" value="用户" class="radio" checked="checked" v-model="identity" >
              <label for="student">我是用户</label>
              <input type="radio" id="teacher" name = "type" value="管理员" class="radio" v-model="identity">
              <label for="teacher" >我是管理员</label>
            </div>

            <input type="button" value="登录" class="submit" @click="onSubmit">

          </form>
          <a class="forget" @click =jumpForget >忘记密码</a>
        </div>
      </div>
  </div>
</template>

<style scoped>
.bg{
  width:100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-image: url("../../assets/img/register&login/login BG.png");
  background-size:100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.box{
  width: 80%;
  height: 80%;
  background-color: white;
  border-radius: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  display: flex;
}
.box-left{
  width: 43%;
  height: 75%;
  float: left;
  margin: 6%;
  background-image: url("../../assets/img/register&login/log in.jpg");
  background-size:100% 100%;
  background-repeat: no-repeat;
  border-radius: 60px;
  box-shadow: 0 0 25px 15px rgba(0, 0, 0, 0.25);
}
.box-right{
  float: left;
  padding-top: 5% ;
  width: 40%;
  height: 70%;

}
ul{
  margin-bottom: 4%;
  margin-top: 0;
}
li{
  display: inline-block;
  margin: 0 10px;
}
li>a{
  display: block;
  text-decoration: none;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 5px;
  line-height: 71px;
  color: rgba(0, 0, 0, 1);
  font-family: "Arial Black",fantasy;

}
a.login{
  border-bottom: 10px solid rgba(57, 74, 121, 1);
}
.login:hover{
  cursor: default;
}
.register{
  color: rgba(0, 0, 0, 0.5);

}
.register:hover{
  cursor: pointer;
  color: rgba(0, 0, 0, 0.68);
  border-bottom: 10px solid rgba(57, 74, 121, 1);
}
a.forget{
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 2px;
  color: rgba(42, 130, 228, 0.5);
  text-decoration: none;
  position: absolute;
  left: 78%;
  top: 58%;
}
a.forget:hover{
  color: rgba(42, 130, 228, 1);
  cursor: pointer;
}
input{
  width:25vw;
  height:6vh;
  border-radius: 50px;
  display: block;
  padding: 5px 5px 5px 30px;
  background-repeat: no-repeat;
  background-position: 8px 0;
  font-size: 120%;
  margin-bottom:  3%;
  margin-left: 5%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
input.username{
  background-image: url("../../assets/img/register&login/user.png");
  background-size: 13% 100%;
  text-indent: 40px;
}
input.password{
  background-image: url("../../assets/img/register&login/psw.png");
  background-size: 13% 100%;
  text-indent: 40px;
}
.submit{
  height: 8vh;
  margin-left: 15%;
  margin-top: 12%;
  width: 60%;
  padding: 0;
  text-align: center;
  background: rgba(57, 74, 121, 1);
  font-size: 25px;
  color: white;
  border-radius: 25px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.submit:hover{
  cursor: pointer;
  background: rgba(79,90,151, 1);
}
form{
  padding: 0;
}
input.radio{
  width:3vw;
  height:2vh;
  box-shadow: none;
  margin-top: 6px;

}
.radio-div{
  margin-top: 20px;
  margin-left: 20px;
  width: 400px;
  display: flex;

}
.radio-div>label{
  width: 150px;
}
</style>